CSS ಕಂಟೇನರ್ ಕ್ವೆರಿ ಪ್ರಕಾರವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣ

ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸವು ವರ್ಷಗಳಿಂದ ಗಮನಾರ್ಹವಾಗಿ ವಿಕಸನಗೊಂಡಿದೆ. ಆರಂಭದಲ್ಲಿ, ನಾವು ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತರಾಗಿದ್ದೆವು. ಆದಾಗ್ಯೂ, ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದಂತೆ, ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳ ಮಿತಿಗಳು ಸ್ಪಷ್ಟವಾದವು. ಈಗ CSS ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಬಂದಿವೆ, ಇದು CSS ಸ್ಪೆಸಿಫಿಕೇಶನ್‌ಗೆ ಒಂದು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಯಾಗಿದ್ದು, ಡೆವಲಪರ್‌ಗಳಿಗೆ ವ್ಯೂಪೋರ್ಟ್ ಬದಲಿಗೆ, ತಮ್ಮ ಒಳಗೊಂಡಿರುವ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರ ಅಥವಾ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಸ್ಟೈಲ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಹೆಚ್ಚಿನ ನಮ್ಯತೆ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಮಟ್ಟದ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್ ಒದಗಿಸುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಂದರೇನು?

ಸಾರಾಂಶದಲ್ಲಿ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಪೋಷಕ ಕಂಟೇನರ್‌ನ ಗಾತ್ರ ಅಥವಾ ಶೈಲಿಯನ್ನು ಆಧರಿಸಿ CSS ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ. ಸೈಡ್‌ಬಾರ್ ಅಥವಾ ಮುಖ್ಯ ಕಂಟೆಂಟ್ ಪ್ರದೇಶದಲ್ಲಿ ಲಭ್ಯವಿರುವ ಜಾಗವನ್ನು ಆಧರಿಸಿ ತನ್ನ ಲೇಔಟ್ ಅನ್ನು ಹೊಂದಿಸಬೇಕಾದ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಇರುವ ಸನ್ನಿವೇಶವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸಂಕೀರ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಹಾರಗಳನ್ನು ಆಶ್ರಯಿಸದೆಯೇ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಇದನ್ನು ಸಾಧ್ಯವಾಗಿಸುತ್ತವೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಲ್ಲಿ ಎರಡು ಮುಖ್ಯ ಪ್ರಕಾರಗಳಿವೆ:

• ಗಾತ್ರದ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ಇವು ಕಂಟೇನರ್‌ನ ಅಳತೆಗಳನ್ನು (ಅಗಲ ಮತ್ತು ಎತ್ತರ) ಪ್ರಶ್ನಿಸುತ್ತವೆ.
• ಸ್ಥಿತಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು: ಇವು ಕಂಟೇನರ್‌ನ ಶೈಲಿ ಅಥವಾ ಸ್ಥಿತಿಯನ್ನು ಪ್ರಶ್ನಿಸುತ್ತವೆ.

ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣದ ಮೇಲೆ ಗಮನಹರಿಸುತ್ತದೆ, ಇದು ಗಾತ್ರದ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣ: ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣವು ನಿರ್ದಿಷ್ಟ ಗಾತ್ರದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹೆಸರಿಸಲಾದ ಕಂಟೇನರ್ ಪ್ರಕಾರಗಳಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ಗಾತ್ರ-ಆಧಾರಿತ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಸರಳಗೊಳಿಸಲು ನಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಒಂದೇ `min-width` ಮತ್ತು `max-width` ಷರತ್ತುಗಳನ್ನು ಪದೇ ಪದೇ ಬರೆಯುವ ಬದಲು, ನಾವು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್ ಪ್ರಕಾರಗಳನ್ನು ರಚಿಸಬಹುದು. ಇದು ಸ್ವಚ್ಛ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಹೆಚ್ಚು ಓದಬಲ್ಲ ಕೋಡ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

`@container` ನಿಯಮವನ್ನು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ಅನ್ವಯಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಪ್ರಮುಖ ಸಿಂಟ್ಯಾಕ್ಸ್ ಕಂಟೇನರ್ ಹೆಸರು, ಕಂಟೇನರ್ ಪ್ರಕಾರ ಮತ್ತು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತುಗಳಿಗೆ ಕಂಟೇನರ್ ಹೊಂದಿಕೆಯಾದಾಗ ಅನ್ವಯಿಸಬೇಕಾದ ಶೈಲಿಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣದ ಪ್ರಮುಖ ಅಂಶಗಳು

• ಕಂಟೇನರ್ ಹೆಸರು: `container-name` CSS ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್‌ಗೆ ನೀಡುವ ಹೆಸರು. ಈ ಹೆಸರನ್ನು `@container` ನಿಯಮದಲ್ಲಿ ಕಂಟೇನರ್ ಅನ್ನು ಗುರಿಯಾಗಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಒಂದು ಗುರುತಿನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
• ಕಂಟೇನರ್ ಪ್ರಕಾರ: ಕಂಟೇನರ್‌ನ ಪ್ರಕಾರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇದು ಕ್ವೆರಿಗಾಗಿ ಯಾವ ಅಳತೆಗಳನ್ನು ಬಳಸಬೇಕೆಂದು ಮತ್ತು ಕಂಟೈನ್ಮೆಂಟ್ ಅನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸಬೇಕೆಂದು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತದೆ. ಸಾಮಾನ್ಯ ಮೌಲ್ಯಗಳೆಂದರೆ `size`, `inline-size`, `block-size`, ಮತ್ತು `normal`.
• ಕಂಟೇನರ್ ಕ್ವೆರಿ ಷರತ್ತುಗಳು: `@container` ನಿಯಮದೊಳಗಿನ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪೂರೈಸಬೇಕಾದ ಷರತ್ತುಗಳು ಇವು. ಈ ಷರತ್ತುಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಕಂಟೇನರ್‌ನ ಅಳತೆಗಳನ್ನು ಪರಿಶೀಲಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ.
• ಶೈಲಿಗಳು: ಕಂಟೇನರ್ ಕ್ವೆರಿ ಷರತ್ತುಗಳು ಪೂರೈಸಿದಾಗ ಅನ್ವಯಿಸಲಾಗುವ CSS ನಿಯಮಗಳು.

ಆಳವಾಗಿ ಪರಿಶೀಲಿಸೋಣ: ಕಂಟೇನರ್ ಪ್ರಕಾರಗಳು ಮತ್ತು ಅವುಗಳ ಪರಿಣಾಮಗಳು

`container-type` ಪ್ರಾಪರ್ಟಿಯು ಕಂಟೈನ್ಮೆಂಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲು ಮತ್ತು ಕಂಟೇನರ್ ಅನ್ನು ಯಾವ ಅಕ್ಷಗಳ ಉದ್ದಕ್ಕೂ ಪ್ರಶ್ನಿಸಲಾಗುವುದು ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಅದು ತೆಗೆದುಕೊಳ್ಳಬಹುದಾದ ವಿವಿಧ ಮೌಲ್ಯಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ:

• `size`: ಈ ಮೌಲ್ಯವು ಇನ್‌ಲೈನ್ ಮತ್ತು ಬ್ಲಾಕ್ ಅಕ್ಷಗಳೆರಡರಲ್ಲೂ ಗಾತ್ರದ ಕಂಟೈನ್ಮೆಂಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ಇದರರ್ಥ ಕಂಟೇನರ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಕ್ವೆರಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಸಾಮಾನ್ಯ-ಉದ್ದೇಶದ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಅತ್ಯಂತ ಸೂಕ್ತವಾದ ಆಯ್ಕೆಯಾಗಿದೆ.
• `inline-size`: ಇದು ಕೇವಲ ಇನ್‌ಲೈನ್ ಅಕ್ಷದ (ಸಾಮಾನ್ಯವಾಗಿ ಅಗಲ) ಉದ್ದಕ್ಕೂ ಗಾತ್ರದ ಕಂಟೈನ್ಮೆಂಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ನೀವು ಕಂಟೇನರ್‌ನ ಅಗಲದಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಮಾತ್ರ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
• `block-size`: ಇದು ಕೇವಲ ಬ್ಲಾಕ್ ಅಕ್ಷದ (ಸಾಮಾನ್ಯವಾಗಿ ಎತ್ತರ) ಉದ್ದಕ್ಕೂ ಗಾತ್ರದ ಕಂಟೈನ್ಮೆಂಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ನೀವು ಕಂಟೇನರ್‌ನ ಎತ್ತರದಲ್ಲಿನ ಬದಲಾವಣೆಗಳಿಗೆ ಮಾತ್ರ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕಾದಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
• `normal`: ಇದು ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವಾಗಿದೆ. ಇದು ಕಂಟೈನ್ಮೆಂಟ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದಿಲ್ಲ, ಅಂದರೆ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಎಲಿಮೆಂಟ್‌ಗೆ ಅನ್ವಯಿಸುವುದಿಲ್ಲ.

ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣದ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳೊಂದಿಗೆ ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣವು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿವರಿಸೋಣ.

ಉದಾಹರಣೆ 1: ಅಡಾಪ್ಟಿವ್ ಲೇಔಟ್‌ನೊಂದಿಗೆ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್

ಒಂದು ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ತನ್ನ ಅಗಲವನ್ನು ಆಧರಿಸಿ ತನ್ನ ವಿಷಯವನ್ನು ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕಾಗಿದೆ ಎಂದು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಕಾರ್ಡ್ ಕಿರಿದಾಗಿದ್ದಾಗ, ನಾವು ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವನ್ನು ಲಂಬವಾಗಿ ಜೋಡಿಸಲು ಬಯಸುತ್ತೇವೆ. ಕಾರ್ಡ್ ಅಗಲವಾಗಿದ್ದಾಗ, ನಾವು ಅವುಗಳನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುತ್ತೇವೆ.

HTML:

            <div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>Card description goes here.</p>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

CSS:

            .card-container {
  container-name: card;
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 10px;
}

.card img {
  width: 100%;
  margin-bottom: 10px;
}

@container card (min-width: 300px) {
  .card {
    flex-direction: row;
  }

  .card img {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 0;
  }
}

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• ನಾವು `card-container` ಎಲಿಮೆಂಟ್ ಮೇಲೆ `container-name: card` ಮತ್ತು `container-type: inline-size` ಅನ್ನು ಸೆಟ್ ಮಾಡುತ್ತೇವೆ. ಇದು ಅದನ್ನು "card" ಹೆಸರಿನ ಕಂಟೇನರ್ ಆಗಿ ಮಾಡುತ್ತದೆ, ಅದು ಅದರ ಇನ್‌ಲೈನ್ ಗಾತ್ರದಲ್ಲಿ (ಅಗಲ) ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ.
• `@container card (min-width: 300px)` ನಿಯಮವು ಕಂಟೇನರ್‌ನ ಅಗಲವು ಕನಿಷ್ಠ 300 ಪಿಕ್ಸೆಲ್‌ಗಳಿದ್ದಾಗ ಮಾತ್ರ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
• `@container` ನಿಯಮದೊಳಗೆ, ನಾವು ಕಾರ್ಡ್‌ನ `flex-direction` ಅನ್ನು `row` ಗೆ ಬದಲಾಯಿಸುತ್ತೇವೆ, ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯವನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ.

ಉದಾಹರಣೆ 2: ಅಡಾಪ್ಟಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್

ಲಭ್ಯವಿರುವ ಅಗಲವನ್ನು ಆಧರಿಸಿ ವಿಭಿನ್ನವಾಗಿ ಪ್ರದರ್ಶಿಸಬೇಕಾದ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಸ್ಥಳಾವಕಾಶ ಸೀಮಿತವಾಗಿದ್ದಾಗ, ಅದು ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನುಗೆ ಕುಸಿಯುತ್ತದೆ.

HTML:

            <nav class="nav-container">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="hamburger-menu">≡</button>
</nav>
            

              
                Copy
              
            
          

CSS:

            .nav-container {
  container-name: nav;
  container-type: inline-size;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin-right: 20px;
}

.hamburger-menu {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

@container nav (max-width: 500px) {
  .nav-list {
    display: none;
  }

  .hamburger-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

ವಿವರಣೆ:

• ನಾವು `nav-container` ಎಲಿಮೆಂಟ್ ಮೇಲೆ `container-name: nav` ಮತ್ತು `container-type: inline-size` ಅನ್ನು ಸೆಟ್ ಮಾಡುತ್ತೇವೆ.
• `@container nav (max-width: 500px)` ನಿಯಮವು ಕಂಟೇನರ್‌ನ ಅಗಲವು 500 ಪಿಕ್ಸೆಲ್‌ಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಇದ್ದಾಗ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ.
• `@container` ನಿಯಮದೊಳಗೆ, ನಾವು ನ್ಯಾವಿಗೇಷನ್ ಪಟ್ಟಿಯನ್ನು ಮರೆಮಾಡುತ್ತೇವೆ ಮತ್ತು ಹ್ಯಾಂಬರ್ಗರ್ ಮೆನುವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ.

ಸುಧಾರಿತ ಕಂಟೇನರ್ ಕ್ವೆರಿ ತಂತ್ರಗಳು

ಕಂಟೇನರ್ ಕ್ವೆರಿ ಯುನಿಟ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಕಂಟೇನರ್ ಕ್ವೆರಿ ಯುನಿಟ್‌ಗಳು (`cqw`, `cqh`, `cqi`, `cqb`) ಕಂಟೇನರ್‌ನ ಗಾತ್ರವನ್ನು ಆಧರಿಸಿದ ಸಾಪೇಕ್ಷ ಯುನಿಟ್‌ಗಳಾಗಿವೆ. ಅವು ಕಂಟೇನರ್‌ನ ಅಳತೆಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ದ್ರವ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಶಕ್ತಿಯುತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಇವು ವ್ಯೂಪೋರ್ಟ್ ಯುನಿಟ್‌ಗಳ (vw, vh) ಹಾಗೆಯೇ ಇವೆ, ಆದರೆ ವ್ಯೂಪೋರ್ಟ್‌ನ ಗಾತ್ರಕ್ಕೆ ಬದಲಾಗಿ ಕಂಟೇನರ್‌ನ ಗಾತ್ರಕ್ಕೆ ಸಾಪೇಕ್ಷವಾಗಿರುತ್ತವೆ.

• `cqw`: ಕಂಟೇನರ್‌ನ ಅಗಲದ 1%.
• `cqh`: ಕಂಟೇನರ್‌ನ ಎತ್ತರದ 1%.
• `cqi`: ಕಂಟೇನರ್‌ನ ಇನ್‌ಲೈನ್ ಗಾತ್ರದ 1% (ಸಮತಲ ಬರವಣಿಗೆಯ ಕ್ರಮದಲ್ಲಿ ಅಗಲ).
• `cqb`: ಕಂಟೇನರ್‌ನ ಬ್ಲಾಕ್ ಗಾತ್ರದ 1% (ಸಮತಲ ಬರವಣಿಗೆಯ ಕ್ರಮದಲ್ಲಿ ಎತ್ತರ).

ಉದಾಹರಣೆ:

            .element {
  font-size: 2cqw;
  padding: 1cqb;
}

            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಫಾಂಟ್ ಗಾತ್ರವು ಕಂಟೇನರ್‌ನ ಅಗಲದ 2% ಆಗಿರುತ್ತದೆ, ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಕಂಟೇನರ್‌ನ ಎತ್ತರದ 1% ಆಗಿರುತ್ತದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು

ಇನ್ನೂ ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸಗಳನ್ನು ರಚಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಮತ್ತು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಪುಟದ ಒಟ್ಟಾರೆ ಲೇಔಟ್ ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಆ ಲೇಔಟ್‌ನೊಳಗಿನ ಪ್ರತ್ಯೇಕ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು. ಈ ಸಂಯೋಜನೆಯು ಜಾಗತಿಕ ಮತ್ತು ಸ್ಥಳೀಯ ಎರಡೂ ರೀತಿಯ ರೆಸ್ಪಾನ್ಸಿವ್‌ನೆಸ್‌ಗೆ ಅವಕಾಶ ನೀಡುತ್ತದೆ.

ಶ್ಯಾಡೋ ಡಾಮ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಶ್ಯಾಡೋ ಡಾಮ್‌ನಲ್ಲಿ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತವೆ, ಇದು ತಮ್ಮ ಕಂಟೇನರ್‌ನ ಗಾತ್ರಕ್ಕೆ ಸ್ಪಂದಿಸುವ, ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟೆಡ್, ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿರುವ ಸಂಕೀರ್ಣ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಮೊಬೈಲ್-ಫಸ್ಟ್ ವಿಧಾನದಿಂದ ಪ್ರಾರಂಭಿಸಿ: ಮೊದಲು ಚಿಕ್ಕ ಕಂಟೇನರ್ ಗಾತ್ರಕ್ಕಾಗಿ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಿ ಮತ್ತು ನಂತರ ಕಂಟೇನರ್ ಬೆಳೆದಂತೆ ಅವುಗಳನ್ನು ಕ್ರಮೇಣವಾಗಿ ವರ್ಧಿಸಿ.
• ಅರ್ಥಪೂರ್ಣ ಕಂಟೇನರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ಕಂಟೇನರ್‌ನ ಉದ್ದೇಶವನ್ನು ಪ್ರತಿಬಿಂಬಿಸುವ ವಿವರಣಾತ್ಮಕ ಕಂಟೇನರ್ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದು ಮಾಡುತ್ತದೆ.
• ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಕ್ವೆರಿಗಳನ್ನು ತಪ್ಪಿಸಿ: ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿ ಷರತ್ತುಗಳನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಸರಳವಾಗಿಡಿ. ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಕ್ವೆರಿಗಳು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟಕರವಾಗಿಸಬಹುದು.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ಆಗಿರುವುದನ್ನು ಮತ್ತು ಸರಿಯಾಗಿ ಹೊಂದಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿವಿಧ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಗಾತ್ರಗಳನ್ನು ಅನುಕರಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಗಮನಾರ್ಹ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತವೆಯಾದರೂ, ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಗಮನಹರಿಸುವುದು ಮುಖ್ಯ. ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಲ್ಲಿ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಶೈಲಿಗಳನ್ನು ತಪ್ಪಿಸಿ, ಏಕೆಂದರೆ ಅವು ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಅಗತ್ಯವಿರುವಂತೆ ಬೆಂಚ್‌ಮಾರ್ಕ್ ಮಾಡಿ ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ.
• ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ದಾಖಲಿಸಿ: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಕಾಂಪೊನೆಂಟ್ ವಿನ್ಯಾಸಕ್ಕೆ ಸಂಕೀರ್ಣತೆಯ ಪದರವನ್ನು ಸೇರಿಸುವುದರಿಂದ, ಭವಿಷ್ಯದ ಸುಲಭ ನಿರ್ವಹಣೆಗಾಗಿ ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಲ್ಲಿ ನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ದಾಖಲಿಸಲು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲ

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ವೇಗವಾಗಿ ಬೆಳೆಯುತ್ತಿದೆ. Chrome, Firefox, Safari, ಮತ್ತು Edge ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳು ಈಗ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತವೆ. ನಿಮ್ಮ ಗುರಿ ಪ್ರೇಕ್ಷಕರು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಪ್ರಯೋಜನಗಳನ್ನು ಅನುಭವಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು "Can I use" ನಂತಹ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಮಾಹಿತಿಯನ್ನು ಯಾವಾಗಲೂ ಪರಿಶೀಲಿಸಿ.

ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, ಹೊಂದಾಣಿಕೆಯನ್ನು ಒದಗಿಸಲು ನೀವು ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಆದಾಗ್ಯೂ, ಪಾಲಿಫಿಲ್‌ಗಳು ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ಸ್ಥಳೀಯ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ನಡವಳಿಕೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪುನರಾವರ್ತಿಸದೇ ಇರಬಹುದು ಎಂದು ತಿಳಿದಿರಲಿ.

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ರೆಸ್ಪಾನ್ಸಿವ್ ವಿನ್ಯಾಸದ ಭವಿಷ್ಯ

ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಅವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ನಮ್ಯ, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಕಾಂಪೊನೆಂಟ್-ಚಾಲಿತ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತವೆ. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಸುಧಾರಿಸುತ್ತಾ ಹೋದಂತೆ, ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಹೆಚ್ಚು ಅಗತ್ಯವಾದ ಸಾಧನವಾಗುತ್ತವೆ.

ಅನುಷ್ಠಾನಕ್ಕಾಗಿ ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅನುಷ್ಠಾನಗೊಳಿಸುವಾಗ, ಈ ಅಂಶಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ಸ್ಥಳೀಕರಣ ಮತ್ತು ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (l10n ಮತ್ತು i18n): ಭಾಷೆಗಳ ನಡುವೆ ಪಠ್ಯದ ಉದ್ದವು ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಗುತ್ತದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಕಂಟೇನರ್‌ಗಳೊಳಗಿನ ವಿಭಿನ್ನ ಪಠ್ಯ ಗಾತ್ರಗಳಿಗೆ ಎಲಿಮೆಂಟ್‌ಗಳು ಹೊಂದಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತವೆ, ಓವರ್‌ಫ್ಲೋಗಳು ಮತ್ತು ಲೇಔಟ್ ಬ್ರೇಕ್‌ಗಳನ್ನು ತಡೆಯುತ್ತವೆ.
• ಬಲದಿಂದ ಎಡಕ್ಕೆ (RTL) ಭಾಷೆಗಳು: ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ RTL ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅರೇಬಿಕ್ ಅಥವಾ ಹೀಬ್ರೂಗಾಗಿ ಚಿತ್ರ ಮತ್ತು ಪಠ್ಯ ಸ್ಥಾನಗಳನ್ನು ಬದಲಾಯಿಸಬೇಕಾದರೆ, ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತವೆ. ಸಂಪೂರ್ಣ RTL ಬೆಂಬಲಕ್ಕಾಗಿ ನೀವು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು (ಉದಾ., `margin-inline-start`) ಬಳಸಬೇಕಾಗಬಹುದು.
• ಸಾಂಸ್ಕೃತಿಕ ವಿನ್ಯಾಸ ಆದ್ಯತೆಗಳು: ಆಧಾರವಾಗಿರುವ ತರ್ಕವು ಒಂದೇ ಆಗಿದ್ದರೂ, ಸಾಂಸ್ಕೃತಿಕ ವಿನ್ಯಾಸ ಆದ್ಯತೆಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ವಿಭಿನ್ನ ಸಂಸ್ಕೃತಿಗಳಲ್ಲಿ ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳು ಮತ್ತು ದೃಶ್ಯ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಗ್ರಹಿಸಬಹುದು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸಿ. ಕೆಲವು ಪ್ರದೇಶಗಳಲ್ಲಿ ಕನಿಷ್ಠ ವಿನ್ಯಾಸವು ಯೋಗ್ಯವಾಗಿರಬಹುದು, ಆದರೆ ಇತರರಲ್ಲಿ ಹೆಚ್ಚು ದೃಶ್ಯ-ಸಮೃದ್ಧ ವಿನ್ಯಾಸವು ಯೋಗ್ಯವಾಗಿರಬಹುದು.
• ಪ್ರವೇಶಿಸುವಿಕೆ (Accessibility): ನಿಮ್ಮ ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳ ಬಳಕೆಯು ಪ್ರವೇಶಿಸುವಿಕೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಉದಾಹರಣೆಗೆ, ಎಲ್ಲಾ ಕಂಟೇನರ್ ಗಾತ್ರಗಳಲ್ಲಿ ಪಠ್ಯವು ಓದಬಲ್ಲದು ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳು ಸುಲಭವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದು ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ತೀರ್ಮಾನ

ಕಂಟೇನರ್ ಕ್ವೆರಿ ವರ್ಗೀಕರಣವು ನಿಮ್ಮ ರೆಸ್ಪಾನ್ಸಿವ್ ವೆಬ್ ವಿನ್ಯಾಸಗಳ ನಮ್ಯತೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಬಹಳವಾಗಿ ಸುಧಾರಿಸಬಲ್ಲ ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. ವಿಭಿನ್ನ ಕಂಟೇನರ್ ಪ್ರಕಾರಗಳನ್ನು ಮತ್ತು ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ತಮ್ಮ ಪರಿಸರಕ್ಕೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು, ಇದು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ. ಕಂಟೇನರ್ ಕ್ವೆರಿಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಲೇಔಟ್‌ಗಳ ಮೇಲೆ ಹೊಸ ಮಟ್ಟದ ನಿಯಂತ್ರಣವನ್ನು ಅನ್‌ಲಾಕ್ ಮಾಡಿ!